<template>
	<div class="guess-dia-content1" :class="contentClass">
		<div style="overflow:hidden">
			<div class="lh-header t-c">
				<div class="lh-title1">{{title}}</div>
				<!-- <div class="lh-desc ft-24">{{desc}}</div> -->
				<div class="guess-number mt-20 ft-24">第{{number}}期</div>
				<div class="lh-time ft-24 co-gray">剩余竞猜时间</div>
				<div class="lh-timer">{{time}}</div>
			</div>
		</div>
		<div class="lh-content t-c">
			<div class="lh-choose ft-24 co-gray">请选择一个号</div>
			<div class="lh-choose-list mt-20 ft-28" >
				<div v-if="list.length>0" class="lh-choose-list1">
					<div class="choose-item-out" v-for="(item,index) in list">
						<div :class=" 'lh-choose-item '+(lhdArr.indexOf(item.name)>=0?'checked':'') " @click="setType(item.name,index)">{{item.name}}</div>
						<div class="mt-10 ft-24 co-gray">{{item.odds}}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="lh-bottom-div"></div>
		<div class="lh-bottom">
			<div class="p-special">
				<div class="ft-24 co-gray">所属号码投注区域</div>
				<div class="ft-28">
					<div class="dis-flex lh-price align-center">
						<div>单注金额</div>
						<div class="ml-30">
							<input ref="jiaofen" placeholder="请输入金额" :value="price" @input="changePrice($event)" type="number" pattern="\d*" class="t-c" />
						</div>
						<div :class="'price-unit '+(priceType==0?'actived':'')" @click="setLhdPrice(0)">元</div>
						<div :class="'price-unit '+(priceType==1?'actived':'')" @click="setLhdPrice(1)">角</div>
						<div :class="'price-unit '+(priceType==2?'actived':'')" @click="setLhdPrice(2)">分</div>
					</div>
					<div class="dis-flex">
						<div class="flex-1">投注数量：<span class="co-red mr-10">{{lhdArr.length}}</span>注</div>
						<div class="flex-1">投注金额：<span class="co-red mr-10">{{totalMoney}}</span>元</div>
					</div>
				</div>
			</div>
			<div class="draw-result ft-24 t-c">若中奖，单注最高中 ：<span class="co-red">
				{{maxPrice}}</span> 元</div>
			<div class="t-c">
				<a :class="'btn btn-red btn-circle ft-28 join-btn t-c '+(maxPrice>0?'':'join-btn-disabled')" @click="join" v-if="remaining>totalMoney">立即下注</a>
				<a v-else :class="'btn btn-red btn-circle ft-28 join-btn t-c '+(maxPrice>0?'':'join-btn-disabled')" >您的余额不足，请立即充值</a>
			</div>
		</div>
	</div>
</template>
<script>
	import {playBet} from '@/api/hourlottery';

	export default{
		props:{
			remaining:{//余额
				type:Number,
				default:0
			},
			lotteryId:{
				type:Number,
				default:0
			},
			playId:{
				type:Number,
				default:0
			},
			title:{
				type:String,
				default:""
			},
			desc:{
				type:String,
				default:""
			},
			contentClass:{
				type:String,
				default:""
			},
			number:{
				type:String,
				default:""
			},
			time:{//倒计时
				type:String,
				default:''
			},
			list:{
				type:Array,
				default:[]
			}
		},
		computed:{
			totalMoney(){
				let priceType=this.priceType;
				let num=priceType==0?1:priceType==1?0.1:0.01;
				let perMoney=this.price*num;
				let len=this.lhdArr.length;
				return parseFloat(perMoney*len).toFixed(2);
			},
			maxPrice(){
				let blArr=this.blArr;
				let priceType=this.priceType;
				let num=priceType==0?1:priceType==1?0.1:0.01;
				let perMoney=this.price*num;
				if (blArr.length==0) {
					return 0;
				}else{
					let total=0;
					let pl=Math.max(...blArr);
					return parseFloat(pl*(perMoney||0)).toFixed(2);
				}
			}
		},
		data(){
			return {
				priceType:0,
				lhdArr:[], //选择列表
				blArr:[],
				price:"",
				lhdPriceArr:["","",""],//元 角 分
			}
		},
		methods:{
			setType(type,index1){//和值选号
				let arr=this.lhdArr;
				let index=arr.indexOf(type);
				if (index>=0) {
					this.blArr.splice(index,1);
					this.lhdArr.splice(index,1);
				}else{
					this.blArr.push( this.list[index1].odds );
					this.lhdArr.push(type);
				}
			},
			changePrice(e){
				/*let priceIndex=this.lhdPrice;
				if (priceIndex>0 && e.target.value>=10) {
					this.$set(this.lhdPriceArr, priceIndex, e.target.value.slice(0,1))
					return true;
				}
				this.$set(this.lhdPriceArr, priceIndex, e.target.value)*/
				this.price=e.target.value;
			},
			closeGusee(){
				this.$emit('input', false);
			},
			join(){
				if (this.lhdArr.length==0) {
					alert('请选择一个号码');
					return false;
				}else if(!this.price){
					alert('请输入投注金额');
					return false;
				}
				let lhdArr=this.lhdArr;
				let lhdPriceArr=this.lhdPriceArr;
				let money=this.totalMoney;
				let maxPrice=this.maxPrice;
				let selnumber=lhdArr.join(',');
				playBet({lottery_id:this.lotteryId,play_id:this.playId,selnumber,money}).then(res=>{
					if (res.code==1) {//投注成功
						this.reset();
						this.$emit('save',{money,maxPrice});
					}else{

					}
				});

				
			},
			reset(){//状态重置
				this.priceType=0;
				this.lhdArr=[]; //选择列表
				this.blArr=[];
				this.price="";
			},
			setLhdPrice(type){
				this.priceType=type;
			}
		}
	}
</script>
<style scoped lang="scss">
	@import '@/css/base.scss';
	.guess-dia-content1{min-height: inherit;position: relative;}
    .lh-title{position: fixed;z-index: 1112;top: 10%;margin-top: -64px;left:50%;width: 128px;height: 128px;line-height:128px;margin-left: -64px;background: #FFE5E7;border-radius: 50%;font-size:28px;color: #FD4658;}
    .lh-header{margin-top: 60px;padding-bottom:30px;border-bottom: 1px solid transparent; 
  border-image: svg(1px-border param(--color #F5F5F5)) 2 2 stretch;border-top:0; }
    .lh-title1{font-size: 32px;font-weight: bold;}
    .guess-number{display: inline-block;padding: 6px 10px;background: #FFF5DD;border-radius: 4px;color: #FF9F03;}
    .lh-desc{margin-top: 8px;color: #958DA5;}
    .lh-time{margin-top: 18px;}
    .lh-timer{height: 66px;line-height: 66px;margin-top: 6px;font-size: 48px;color: #FD4658;}


    .lh-content{margin-top: 54px;padding-bottom: 40px;}
    .choose-item-out{display: inline-block;margin: 24px;text-align: center;}
    .lh-choose-item{width: 92px;height:92px;;line-height:92px;background: #FFFFFF;border: 1px solid #FD4658;border-radius: 50%;text-align: center;color: #FD4658;}
    .lh-choose-item.checked{background: $red;color: #FFF;}
    .lh-bottom-div{height: 480px;}
    .lh-bottom{position: absolute;bottom:0;width: 100%;height: 480px;box-sizing:border-box;border-top: 1px solid transparent; 
  border-image: svg(1px-border param(--color #F5F5F5)) 2 2 stretch;border-bottom:0;}
  	.p-special{padding:34px 30px 0 30px;}
  	.lh-price{margin: 38px 0 22px;}
  	.lh-price input{width: 250px;height: 60px;padding: 8px;line-height: 44px;box-sizing:border-box;outline: 0;border-radius: 8px;border:1px solid #E9E9E9;}
  	.price-unit{width: 60px;height:60px;line-height: 60px;margin-left:10px;border: 1px solid #E9E9E9;border-radius: 8px;text-align: center;font-size: 24px;}
  	.price-unit.actived{background: #FD4658;color: #FFF;}
  	.draw-result{margin-top: 28px;height: 60px;line-height: 60px;padding-left: 46px;background: #FEF8F8;}

    .join-btn{width: 540px;height: 84px;line-height: 84px;margin-top: 42px;box-sizing:border-box;padding: 0;box-shadow: 0 10px 28px 0 rgba(253,70,88,0.65);}
    .join-btn.join-btn-disabled{opacity: 0.6;}
</style>